import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/scss";
import "swiper/scss/pagination";
import "swiper/scss/navigation";

// import required modules
import { Pagination, Navigation, Autoplay } from "swiper";
import Image from "next/image";

export const MainSlide: React.FC = () => {
  return (
    <>
      <Swiper
        slidesPerView={1}
        spaceBetween={30}
        loop={true}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        pagination={{
          clickable: true,
        }}
        navigation={true}
        modules={[Autoplay, Pagination, Navigation]}
        className="mySwiper"
        onSlideChange={() => console.log("slide change")}
        onSwiper={(swiper) => console.log(swiper)}
      >
        <SwiperSlide>
          <Image
            src="/img/slide-ex-banner1.jpg"
            alt=""
            width={2400}
            height={1080}
          />
        </SwiperSlide>
        <SwiperSlide>
          <Image
            src="/img/slide-ex-banner2.jpg"
            alt=""
            width={2400}
            height={1080}
          />
        </SwiperSlide>
        <SwiperSlide>
          <Image
            src="/img/slide-ex-banner3.jpg"
            alt=""
            width={2400}
            height={1080}
          />
        </SwiperSlide>
        <SwiperSlide>
          <Image
            src="/img/slide-ex-banner4.jpg"
            alt=""
            width={2400}
            height={1080}
          />
        </SwiperSlide>
        <SwiperSlide>
          <Image
            src="/img/slide-ex-banner5.jpg"
            alt=""
            width={2400}
            height={1080}
          />
        </SwiperSlide>
      </Swiper>
    </>
  );
};
